<!-- 组织管理 -->
<template>
  <div class="organList">
    <div class="organList_left">
      <!-- 业务组织架构 -->
      <div v-show="orgFlag == 'business'">
        <div class="organTit">
          <h3>业务组织架构</h3>
          <Button type="primary" @click="changeOrg(2)">切换为嘉扬架构</Button>
        </div>
        <Tree :data="treeListBusiness" @on-select-change="treeChangeBusiness"
          class="tree_render">
        </Tree>
      </div>
      <!-- OA组织架构 -->
      <div v-show="orgFlag == 'OAorg'">
        <div class="organTit">
          <h3>嘉扬组织架构</h3>
          <Button type="primary" @click="changeOrg(1)">切换为业务架构</Button>
        </div>
        <Tree :data="treeList" @on-select-change="treeChange" :render="renderContent"
          class="tree_render">
        </Tree>
      </div>
    </div>

    <div class="organList_right">
      <list ref="list" :checkNodeTitle="checkNodeTitle" @updateOrg='updateOrg'>
      </list>
    </div>
  </div>
</template>

<script>
  // import list from './compenent/organ.vue'
  import list from './list.vue'
  import crimeOpt from './opt/listOpt'
  import organApi from '@/biz/backStage/organizationManagement'
  import secret from '@/common/secretCode.js'
  export default {
    components: {
      list
    },
    data() {
      return {
        treeList: [],
        treeListBusiness: [],
        orgFlag: 'business', //'OAorg',
        checkNodeTitle: '',
        preEvent: {},
        OAorg: {},
        BusinessOrg: {},

      }
    },
    created() {
      //获取部门列表
      this.getDepartmentList()
      this.getBusinessList()
    },
    methods: {
      //切换
      changeOrg(type) {
        if (type == 1) {
          this.orgFlag = 'business'
          this.treeListBusiness.length > 0 && this.$refs.list.checkOrgFun('business', this
            .BusinessOrg)
          this.checkNodeTitle = this.getCheckNodeTitle([this.treeListBusiness[0]]).join('-')
        } else {
          this.orgFlag = 'OAorg'
          this.treeList.length > 0 && this.$refs.list.checkOrgFun('OAorg', this.OAorg)
          this.checkNodeTitle = this.getCheckNodeTitle([this.treeList[0]]).join('-')
        }
      },
      updateOrg() {
        this.getDepartmentList()
        this.getBusinessList()
      },
      //获取业务组织架构
      getBusinessList() {
        crimeOpt.getBusinessList().then(res => {
          this.treeListBusiness = res
          // 默认选中第一条
          this.$set(this.treeListBusiness[0], 'selected', true)
          this.BusinessOrg = res[0]
          res.length > 0 && this.$refs.list.checkOrgFun('business', this.BusinessOrg)
          this.checkNodeTitle = this.getCheckNodeTitle([res[0]]).join('-')
        })
      },

      //获取部门列表
      getDepartmentList() {
        let parmas = {
          appId: this.$dt.userInfo().appId,
          userId: this.$dt.userInfo().userId,
          roleId: this.$dt.userInfo().role.roleId,
          delFlag: 2
        }
        crimeOpt.getDepartmentList(parmas).then(res => {
          this.treeList = res
          this.$set(this.treeList[0], 'selected', true)
          this.OAorg = res[0]
        })
      },
      renderContent(h, {
        data
      }) {
        return h('span', {}, [
          h('span', [
            h('Icon', {
              props: {
                type: 'ios-paper-outline'
              },
              style: {
                marginRight: '8px'
              },
            }),
            h('span', data.title),
          ]),
        ])
      },
      treeChangeBusiness(event) {
        if (!event.length) {
          this.$Message.info('请先选择一个组织或部门！')
          // this.checkNodeTitle = ''
          // this.BusinessOrg = event.length ? event[0] : {}
          // this.$refs.list.checkOrgFun('business', this.BusinessOrg)
          // return false
        } else {
          this.checkNodeTitle = this.getCheckNodeTitle(event).join('-')
          this.BusinessOrg = event.length ? event[0] : {}
          this.$refs.list.checkOrgFun('business', this.BusinessOrg)
        }
        // if (event.length) {

        // }

      },

      treeChange(event) {
        if (!event.length) {
          this.$Message.info('请先选择一个组织或部门！')
          // this.checkNodeTitle = ''
          // this.OAorg = event.length ? event[0] : {}
          // this.$refs.list.checkOrgFun('OAorg', this.OAorg)
          // return false
        } else {
          this.checkNodeTitle = this.getCheckNodeTitle(event).join('-')
          this.OAorg = event.length ? event[0] : {}
          this.$refs.list.checkOrgFun('OAorg', this.OAorg)
        }
        // if (event.length) {

        // }

      },
      // 选中节点标题
      getCheckNodeTitle(event) {
        let checkNode = []
        let _this = this
        checkNode.push(event[0].title)
        let curParentId = event[0].children ? event[0].parentId : event[0].orgId
        if (event[0].parentId != null) {
          _find(_this.treeList, curParentId)

          function _find(arr, parentId) {
            arr.forEach((item) => {
              if (item.orgId == parentId) {
                checkNode.unshift(item.title)
                if (item.parentId) {
                  _find(_this.treeList, item.parentId)
                }
              } else {
                if (item.children) {
                  _find(item.children, parentId)
                }
              }
            })
          }
        }
        return checkNode
      },
    },
  }
</script>
<style lang='scss' scoped>
  .organList {
    padding: 20px;
    height: 100%;
    width: 100%;
    display: flex;

    &_left {
      flex: 0 0 300px;
      padding: 0 10px;
      height: 100%;
      border: 1px solid #ccc;
      margin-right: 20px;
      border-radius: 8px;
      max-height: 100%;
      overflow-y: auto;
      position: relative;

      .organTit {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 15px 10px;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
      }

      .tree_render {
        margin-top: 62px;
      }
    }

    &_right {
      // flex: 1;
      width: calc(100% - 320px);
      height: 100%;
      border: 1px solid #ccc;
      border-radius: 8px;
      padding: 20px;
    }

    ::v-deep .ivu-tree-title {
      width: calc(100% - 15px);
    }
  }
</style>